<template>
	<view class="receive">
		<view class="topBox">
			<view class="">
				{{dlName}}
			</view>
			<image :src="imaurl+'d6.png'" style="width: 48rpx;height: 48rpx;margin-left: 30rpx;" mode=""
				@click="handleExit"></image>
		</view>

		<view class="statusBox">
			<view class="statuItem" v-for="(item,index) in JsList" :class="Currindex==index?'statuItemed':''"
				@click="handleCurrIndex(index)">
				{{item}}
			</view>
		</view>

		<view v-if="orderList.length>0" class="">

			<view class="dataList" v-for="(item,index) in orderList" :key="index">
				<view class="topContent" @click="handleInnerorderdetail(item)">
					<view class="ordernum">
						寄送编号:{{item.order_sn}}
					</view>
					<view v-if="item.status==2" class="statusText">
						待发出
					</view>
					<view v-if="item.status==3" class="statusText">
						已发出
					</view>
					<view v-if="item.status==4" class="statusText" style="color: #333333;">
						已完成
					</view>
				</view>

				<view class="addressBox" @click="handleInnerorderdetail(item)">
					<view class="nameprice">
						<text>{{item.my_name}}</text><text>{{item.my_mobile}}</text>
					</view>
					<view class="addresstext">
						{{item.my_address}}
					</view>
				</view>
				<view v-if="item.status==2" class="btns" @click="handleOutshow(item)">
					确认发出
				</view>
				<view v-if="item.status==3" class="btns" @click="handleinnershow(item)">
					确认到达
				</view>
			</view>
		</view>

		<view v-else class="">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无订单">
			</u-empty>
		</view>

		<view class="" style="height: 80rpx;"></view>


		<u-modal :show="outShow" :title="outtitle" :showCancelButton="true" @confirm="confirmOutOrder"
			@cancel="outShow=false"></u-modal>


		<u-modal :show="innerShow" :title="innertitle" :showCancelButton="true" @confirm="confirminnerOrder"
			@cancel="innerShow=false"></u-modal>



		<tabBar :value4="value4" @change4="change4" :list="tabList"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/orderTabbars.vue"
	import {
		tabList
	} from "@/static/orderTab.js"
	import {
		dailisendorders,
		issuesend,
		gpreceivesend
	} from "@/api/api.js"
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				value4: 1,
				tabList,
				Currindex: 0,
				JsList: [
					'全部',
					'待发出',
					'已发出',
					'已完成'
				],
				orderStatus: 0,
				orderList: [],
				outShow: false,
				outtitle: "您确定该信鸽已发出了吗?",
				outOrderId: "",
				innerShow: false,
				innertitle: "您确定该信鸽已到达了吗?",
				innerOrderId: "",
				dlName: "",
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
				page: 1
			}
		},
		onLoad() {
			this.dlName = uni.getStorageSync('userInfo').daili_name
			this.handledailisendorders()
		},
		onShow() {},
		//上拉加载
		onReachBottom() {
			this.page++
			this.handledailisendorders()
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1;
				this.orderList = []
				this.handledailisendorders();
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			change4(name) {
				this.value4 = name
				uni.reLaunch({
					url: this.tabList[name].path
				});
			},

			async handledailisendorders() {
				let res = await dailisendorders({
					status: this.orderStatus,
					type: 2,
					page: this.page
				})
				// this.orderList = res.data.data
				res.data.data.forEach((item, index) => {
					this.orderList.push(item)
				})
				// console.log("333", this.orderList)
			},

			handleCurrIndex(index) {
				this.Currindex = index
				if (index == 0) {
					this.orderStatus = 0
				} else {
					this.orderStatus = index + 1
				}
				this.page = 1
				this.orderList = []
				this.handledailisendorders()
			},

			handleOutshow(item) {
				this.outOrderId = item.id
				this.outShow = true
			},
			async confirmOutOrder() {
				let res = await issuesend({
					id: this.outOrderId
				})
				if (res.code == 1) {
					this.outShow = false
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						this.page = 1
						this.orderList = []
						this.handledailisendorders()
					}, 2100)

				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleinnershow(item) {
				this.innerOrderId = item.id
				this.innerShow = true
			},
			async confirminnerOrder() {
				let res = await gpreceivesend({
					id: this.innerOrderId
				})
				if (res.code == 1) {
					this.innerShow = false
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						this.page = 1
						this.orderList = []
						this.handledailisendorders()
					}, 2100)

				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleInnerorderdetail(item) {
				uni.navigateTo({
					url: `./orderDetail?id=${item.id}`
				})
			},

			handleExit() {
				let that = this
				uni.showModal({
					// title: '提示',
					content: '确定要退出登录吗？',
					confirmColor: '#00BF52',
					success: async function(res) {
						// console.log("是否选择", res)
						if (res.confirm) {
							uni.removeStorageSync("token")
							uni.removeStorageSync("userInfo")
							uni.reLaunch({
								url: "/pages/login/index"
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.topBox {
		width: 750rpx;
		height: 176rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		padding-top: 110rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
	}

	.statusBox {
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;

		.statuItem {
			width: 150rpx;
			height: 68rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 68rpx;
			text-align: center;
		}

		.statuItemed {
			background: #00BF52;
			color: #ffffff;
		}
	}

	.dataList {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.topContent {
			display: flex;
			justify-content: space-between;

			.ordernum {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
				text-align: left;
			}

			.statusText {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #E40700;
				line-height: 38rpx;
			}

		}

		.addressBox {
			width: 690rpx;
			height: 160rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.nameprice {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.addresstext {
				width: 584rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 18rpx;
			}
		}

		.btns {
			width: 240rpx;
			height: 68rpx;
			background: #00BF52;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
			margin-left: 450rpx;
			margin-top: 30rpx;
		}
	}
</style>